<template>
  <div>
    <div class="Popup_window">
      <div @click="ClosePop" class="close">关闭</div>
      <div class="loding">加载中... ...</div>
      <div class="timer">请求用时:{{ timer1 }}秒</div>
      <div><el-button class="btn" type="mini" @click="cancela">终止请求</el-button></div>
    </div>
  </div>
</template>
      
<script>
export default {
  props: {
    cancelget: Function,
    timer: Number,
  },
  data() {
    return {
      timer1:this.timer,
    };
  },
  watch: {
    // 监听父组件传入的数据，更新到本地
    timer(newVal){
        // console.log(oldVal)
        this.timer1 = newVal;
    },
    // 监听本地数据的变化，通知父组件更新
    timer1(newVal) {
        // console.log(oldVal)
        this.$emit('timer', newVal);
    }
},
  mounted() {
  },
  methods: {
    cancela() {
      this.$emit("cancelget");
    },
    ClosePop(){
        this.$emit('ClosePopup')
    }
  },
};
</script>

<style scoped>
.Popup_window {
  width: 28%;
  height: 200px;
  /* border: 1px solid #000; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 2px 	#B0C4DE(190, 196, 192);
  background-color:	#DCDCDC;
}
.close
{ 
    margin-top:2px;
    margin-right:3px;
    cursor:pointer;
    background:#ffff;
    border-radius:3px 3px 3px 3px;
    width:15%;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:12px;
    float:right;
    
}
.loding
{
   text-align:center; 
   font-size:20px;
   margin-top:50px;
}
.timer
{
     text-align:center; 
     font-size:20px;
     margin-top:10px;
}
.btn
{
  margin-top:55px;
  margin-right:2px;
  float:right;
  
}
</style>